<template>
	<view class="h-screen flex flex-col">
		<view class="bg-white">
			<u-tabs :list="tabList" @click="onTabList" :scrollable="false" lineColor="#2A6757" :current="currentIndex">
			</u-tabs>
		</view>
		<view class="flex-1">
			<swiper class="h-full" @change="swiperChange" :current="currentIndex">
				<swiper-item class="h-full">
					<view style="padding-top: 50%;" v-if="list&&!list.length">
						<u-empty text="暂无相关数据" mode="data"></u-empty>
					</view>
					<scroll-view scroll-y class="h-full" v-else>
						<view class="m-5 p-5 bg-white rounded shadow" v-for="i in list" @click="onList(i)">	
							<view class="">
								<view class="mb-2 flex">
									<text class="font-bold mr-3">{{i.goodsSkuName}}</text>
								</view>
								<view class="flex items-center">
									<view class="mr-3">
										<u-image width="100" height="100" :src="getFilePath(i.goodsSkuCoverPic)"
											radius="15"></u-image>
									</view>
									<view class="text-sm flex-1">
										<view class="">
											<text class="">计量单位</text>：
											<text class="text-black-666">{{i.goodsMeasuringName}}</text>
										</view>
										<view class="flex items-center">
											<view class="">应采份数</view>：
											<view class="text-black-666">{{i.goodsCount}}</view>
									
										</view>
										<view class="">
											<text class="">商品规格</text>：
											<text class="text-black-666">{{i.goodsSpecification}}({{i.goodsMeasuringName +'/份'}})</text>
										</view>
										<view class="">
											<text class="">应采总量</text>：
											<text class="text-black-666">{{i.goodsTotal}}</text>
										</view>
										
									
									</view>
									<view class="">
										<u-icon name="arrow-right"></u-icon>
									</view>
								</view>
								
							</view>

						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="h-full">
					<view style="padding-top: 50%;" v-if="doneList&&!doneList.length">
						<u-empty text="暂无相关数据" mode="data"></u-empty>
					</view>
					<scroll-view scroll-y class="h-full" v-else>
						<view class="m-5 p-5 bg-white rounded shadow" v-for="i in doneList">
							<view class="flex">
								<view class="mr-3">
									<u-image width="100" height="100" :src="getFilePath(i.goodsSkuCoverPic)"
										radius="15"></u-image>
								</view>
								<view class="text-sm flex-1">
									<view class="">
										<text class="">SKU名称</text>：
										<text class="text-black-666">{{i.goodsSkuName}}</text>
									</view>
									<view class="">
										<text class="">计量单位</text>：
										<text class="text-black-666">{{i.goodsMeasuringName}}</text>
									</view>
									<view class="flex items-center">
										<view class="">应采份数</view>：
										<view class="text-black-666">{{i.goodsCount}}</view>

									</view>
									<view class="flex items-center">
										<view class="">实采份数</view>：
										<view class="text-black-666">{{i.goodsCountIndeed}}</view>

									</view>
									<view class="">
										<text class="">商品规格</text>：
										<text class="text-black-666">{{i.goodsSpecification}}</text>
									</view>
									<view class="">
										<text class="">应采总量</text>：
										<text class="text-black-666">{{i.goodsTotal}}</text>
									</view>


								</view>
							</view>

						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<u-gap height="64"></u-gap>
		<view class="fixed bottom-0 left-0 right-0 bg-white p-3 u-border-top">
			<u-button type="primary" shape="circle" @click="toGoods">添加商品</u-button>
		</view>
	</view>
</template>

<script>
	import request from '@/utils/request.js'
	import {
		query,
		route
	} from '../../utils/utils'
	import {
		getFilePath
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				list: null,
				doneList: null,
				currentIndex: 0,
				tabList: [{
						name: '未完成'
					},
					{
						name: '已完成'
					}
				],
			}
		},
		onLoad(options) {
			const {
				purchaseBillId,
				type
			} = query(options)
			this.type = type
			this.purchaseBillId = purchaseBillId
		},
		onShow() {
			this.getList()
			this.getDoneList()
		},
		methods: {
			toGoods() {
				const goodsSkuIdList = this.list.map(i => i.goodsSkuId)
				route('/pages/goods/index', {
					goodsSkuIdList,
					type: this.type,
					purchaseBillId: this.purchaseBillId
				})
			},
			getFilePath,
			swiperChange({
				detail: {
					current
				}
			}) {
				this.currentIndex = current
			},
			onTabList({
				index
			}) {
				this.currentIndex = index
			},
			onList(info) {
				route('/pages/purchase/detail', {
					info
				})
			},
			getList() {
				request('purchaseGoods', {
					data: {
						purchaseBillId: this.purchaseBillId,
					},
					row: true
				}).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.list = res.rows
					}
				})
			},
			getDoneList() {
				request('purchaseGoods', {
					data: {
						purchaseBillId: this.purchaseBillId,
						isFinish: 1
					},
					row: true
				}).then(res => {
					console.log(res)
					if (res.code === 200) {
						this.doneList = res.rows
					}
				})
			}
		},
	}
</script>

<style>
</style>
